<template>
	<view class="order-goods-list">
		<view class="order-goods-item" v-for='(item,index) in goodsList' @tap='toGoodsDetail(item)'>
			<view class="order-goods-item-top">
				<view class="order-goods-img">
					<base-img :src="item.skuInfo.image ? item.skuInfo.image : item.goods_image"></base-img>
				</view>
				<view class="order-goods-info">
					<view class="order-goods-name">{{item.goods_name}}</view>
					<view class="attr ellipsis">
						规格：{{item.skuInfo.spec_value_names ? item.skuInfo.spec_value_names : item.good_sku_name}}</view>
				</view>
				<view class="order-goods-price">
					<view class="price">￥{{item.goods_price}}<text v-if='item.goods_unit' class="unit">/{{item.goods_unit}}</text></view>
					<view class="num">x{{item.total_num || item.order_goods_item.total_num}}</view>
				</view>
			</view>
			<view class="after-sale-btn-wrap" v-if='pageType == 1'>
				<template v-if='item.orderRefund'>
					<view class="after-sale-btn line-center" @tap.stop='toAfterSalePage(item.order_goods_id,item.orderRefund)'
						v-if='item.orderRefund.status == 30'>重新申请退货退款</view>
					<view class="after-sale-btn line-center" @tap.stop='toAfterSalePage(item.order_goods_id,item.orderRefund)'
						v-else>{{item.orderRefund.state_text}}</view>
				</template>
				<view class="after-sale-btn line-center" @tap.stop='toAfterSalePage(item.order_goods_id,item.orderRefund)'
					v-else-if='orderDetail.delivery_status == 20 && orderDetail.receipt_status == 10'>申请退货退款</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "order-goods-list",
		props: {
			list: Array,
			pageType: {
				type: Number,
				default: 0, // 0 -- 提交订单页  1 -- 订单详情页  2 --- 订单列表  3 --- 售后列表
			},
			orderDetail: Object
		},
		watch: {
			list: {
				immediate: true,
				handler(newV) {
					this.goodsList = newV;
					console.log('goodsList', this.goodsList)
				},
			},
		},
		data() {
			return {
				goodsList: []
			};
		},
		created() {

		},
		methods: {
			toGoodsDetail(item) {
				if (item.goods_status == 20 || item.order_goods_item.goods_status == 20) {
					uni.showToast({
						title: '商品已下架',
						icon: 'none'
					})
					return;
				}
				let goods_id = '';
				switch (Number(this.pageType)) {
					case 1:
						goods_id = item.goods_id;
						break;
					case 2:
						goods_id = item.order_goods_item.goods_id;
						break;
				}
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?goods_id=${goods_id}`
				})
			},
			toAfterSalePage(order_goods_id, refund) {
				if(refund){
					if (refund.status != 30) {
						uni.navigateTo({
							url: `/pages/after-sale-page/after-sale-detail/after-sale-detail?order_refund_id=${refund.order_refund_id}`
						})
					}else{
						uni.navigateTo({
							url: `/pages/after-sale-page/apply-sale/apply-sale?order_goods_id=${order_goods_id}`
						})
					}
				}else{
					uni.navigateTo({
						url: `/pages/after-sale-page/apply-sale/apply-sale?order_goods_id=${order_goods_id}`
					})
				}
				/* if (refund.status != 30) {
					uni.navigateTo({
						url: `/pages/after-sale-page/after-sale-detail/after-sale-detail?order_refund_id=${refund.order_refund_id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/after-sale-page/apply-sale/apply-sale?order_goods_id=${order_goods_id}`
					})
				} */

			}
		},
	}
</script>

<style lang="scss" scoped>
	$supplier-goods-color: #3DB963;

	.order-goods-list {
		// margin:24rpx 24rpx 0;
		// padding:24rpx;
		// background: #fff;
		// border-radius: 16rpx;
	}

	.order-goods-item {
		margin-bottom: 24rpx;

		.order-goods-item-top {
			display: flex;
		}

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.order-goods-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		overflow: hidden;
		margin-right: 16rpx;
	}

	.order-goods-info {
		flex: 1;
		overflow: hidden;
		margin-right: 16rpx;

		.order-goods-name {
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.attr {
			width: 100%;
			color: #AFB0B2;
			font-size: 24rpx;
			line-height: 36rpx;
		}
	}

	.order-goods-price {
		text-align: right;

		.price {
			// color:#FF5040;
		}

		.num {
			padding-top: 66rpx;
			font-size: 24rpx;
		}
	}

	.after-sale-btn-wrap {
		display: flex;
		justify-content: flex-end;
		margin-top: 12rpx;

		.after-sale-btn {
			min-width: 160rpx;
			height: 68rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #f6f6f6;
			border-radius: 34rpx;
			font-size: 24rpx;
		}
	}
	.unit{
		color: #AFB0B2;
		font-size: 20rpx;
	}
</style>